<template>
	<view class="content">

		<view class="top-content">

		<!-- 	<view class="tapeList">
				<view class="type" :class="typeId == item.id?'active':''" v-for="(item,index) in typeList" :key="index"
					@tap="changeType(item)">
					{{item.title}}
					<view class="procss" v-if="typeId == item.id"></view>
				</view>
			</view> -->


			<scroll-view scroll-x="true" style='background: #fff;'>
				<view class="tabbar-content">
					<view class="tab" :class="navId == item.id?'active':''" v-for="(item,index) in navList2" :key="index"
						@tap="changeNav(item)">
						{{item.title}}
					</view>
				</view>
			</scroll-view>


		</view>

		<!-- 抢拍商品列表 -->
		<view
			style='display: flex;flex-direction: column;align-items: center;padding-top: 20rpx;box-sizing: border-box;'
			v-if="typeId == 1">
			<view class="list" v-for="(item,index) in list" :key="index" @tap.stop="goDetail(item)">
				<view class="shopping">
					<!-- <view class="status" :class="item.state == 1?'status1':item.state == 2?'':item.state == 3?'status2':item.state == 4?'status3':'status4'">{{item.state == 1?'收益中':item.state == 2?'出售中':item.state == 3?'已售出':item.state == 4?'已提货':'已发货'}}</view> -->
					<image :src="item.imageUrl" class="shoppingImg"></image>
					<view class="shoppingInfo">
						<view class="title elliptical2">{{item.goodsName}}</view>
						<view class="price">数量：<span>{{item.quantity||0}}</span></view>
						<view class="time">创建时间：{{item.createTime}}</view>

					</view>
					<view class="optionsBtn">
						<view class="submit mr-20" v-if='item.state == 1' @click.stop='handleLiuzhuan(item)'>
							流转
						</view>
						<view class="submit cancel" style="margin-right: 20rpx;" v-if="item.state == 5"
							@click.stop="viewWuliu(item)">查看物流</view>
						<view class="submit" v-if='item.state == 5' @click.stop='handleConfirmGoods(item)'>
							确认收货
						</view>
						<view class="submit_2" v-if='item.state == 1' @click.stop='handleSubmitGoods(item)'>
							提货
						</view>


						<!-- <view class="submit" v-if="item.state == 1 && item.orderState == 1"
								@tap.stop="pickGoods(item)">提货</view> -->
						<!-- <view class="submit" v-if="item.state == 1 " @tap.stop="listing(item)">上架寄售</view> -->
						<!-- <view class="submit cancel" v-if="item.state == 2" @tap.stop="cancel(item)">取消寄售</view> -->
						<!-- <view class="submit_1">
							取消流转
						</view>
						<view class="submit_1">
							流转未开始
						</view>
						-->
					</view>

					<view class="sessionsName" :style='{backgroundColor:colorList[item.belongSessions-1]}'>
						{{item.belongSessionsName}}
					</view>

				</view>
				<image src="@/static/static-home/image50.png" v-if='item.state == 3' class='iconStateSize' mode="">
				</image>
				<image src="@/static/static-home/image51.png" v-if='item.state == 8' class='iconStateSize' mode="">
				</image>

			</view>
		</view>

		<!-- 商城商品列表 -->
		<view v-if="typeId == 2">
			<view class="list" v-for="(item,index) in list" :key="index" @tap.stop="goDetail(item)">
				<view class="shopping">
					<view class="statusShopping"
						:class="item.state == 0?'':item.state == 1?'statusShopping4':item.state == 2?'statusShopping1':item.state == 3?'statusShopping3':'statusShopping2'">
						{{item.state == 0?'待支付':item.state == 1?'待发货':item.state == 2?'待收货':item.state == 3?'已完成':'已取消'}}
					</view>
					<image :src="item.coverUrl" class="shoppingImg"></image>
					<view class="shoppingInfo">
						<view class="title elliptical2">{{item.goodsName}}</view>
						<view class="price">
							<span>
								{{ item.orderType == 1?'购物券抵扣':item.orderType == 2||item.orderType == 4?'提货券抵扣':'￥' }}{{item.orderType == 1 || item.orderType == 3|| item.orderType == 4||item.orderType==6||item.orderType==5?item.payPrice:item.payVoucher}}</span>
						</view>
						<view class="time">创建时间：{{item.payTime}}</view>
					</view>
				</view>
				<view class="submit  cancel viewWuliuBtn" v-if="item.state == 2" @tap.stop="viewWuliu(item)">查看物流</view>
				<view class="submit _subotherBtn" v-if="item.state == 2" @tap.stop="confirmReceive(item)">确认收货</view>
			</view>

		</view>

		<view class="noneContent" v-if="list.length == 0">
			<image src="@/static/withdraw/noneCard.png" class="noneImg"></image>
			<view class="tips">暂无数据</view>
		</view>

		<liuzhuanPopupVue :show="selectItemLiuzhuan" :goodsInfo='selectItem' @close="closePropDate"
			@sure='handleLiuzhuanFn' />


		<tihuoPopupVue ref='tihuoCom' :show="selectItemTiHuo" :goodsInfo='selectItem' @close="closePropDate"
			@sure='handleTiHuoFn' />


		<uni-popup :mask-click="false" ref='sendCode' type='center'>
			<view class="codeContent">
				<image src="@/static/mine/close.png" class='closeIcon' mode="" @click="handleCloseTihuo"></image>
				<view class="headerTitle">
					提示
				</view>
				<view class="content">
					您确认要<span>提货</span>吗？<br />确认之后商家将<span>交割</span>该订单
				</view>

				<view class="btn_option">
					<view class='cancel-btn' @click='handleCloseTihuo'>
						取消提货
					</view>

					<view class='sure-btn' @click='handleSureTihuoFun' :disabled="counting">
						{{counting?'确认提货('+count+')':'确认提货'}}
					</view>
				</view>
			</view>
		</uni-popup>


		<uni-popup ref="address" :mask-click="false">
			<div class='addressPopupBox'>
				<div class='goodsInfoBox'>
					<image class='goodsMainImage' :src="goodsInfo.coverUrl||goodsInfo.imageUrl" alt="" />

					<div class='logistics-info'>
						<div class='logistics-state'>
							{{logisticsInformation.state==7?'转投':logisticsInformation.state==0?'在途':logisticsInformation.state==1?'揽收':logisticsInformation.state==2?'疑难':logisticsInformation.state==3?'签收':logisticsInformation.state==4?'退签':logisticsInformation.state==5?'派件':logisticsInformation.state==6?'退回':logisticsInformation.state==8?'清关':logisticsInformation.state==14?'拒签':'已发货'}}
						</div>
						<div class='logistics-kuaidi' v-if='logisticsInformation.expressName'>
							{{logisticsInformation.expressName}}：{{logisticsInformation.number}}
						</div>
					</div>
				</div>
				<div class='logistics-list-contaner'>
					<div class='logistics-list'>
						<!-- <div class='address'>
							<div class='takeState2'
								:class="{ 'takeState': logisticsInformation.data&&logisticsInformation.data.length!=0 }">
								收货</div>
							<div class='text'>
								{{goodsInfo.province}}{{goodsInfo.city}}{{goodsInfo.county}}{{goodsInfo.detailAddress}}&emsp;
								{{goodsInfo.receiver}}&emsp;{{goodsInfo.receiverPhone}}
							</div>
						</div> -->
						<div v-if='logisticsInformation.data'>
							<div class='address' v-for="(item,index) in logisticsInformation.data" :key="item.time">

								<div class='takeState' v-if='index==0'>
									{{logisticsInformation.state==7?'转投':logisticsInformation.state==0?'在途':logisticsInformation.state==1?'揽收':logisticsInformation.state==2?'疑难':logisticsInformation.state==3?'签收':logisticsInformation.state==4?'退签':logisticsInformation.state==5?'派件':logisticsInformation.state==6?'退回':logisticsInformation.state==8?'清关':logisticsInformation.state==14?'拒签':''}}
								</div>
								<div class='takeState1' v-else>
								</div>
								<div class='text qianshou'>
									<div class='text-A'>
										{{item.ftime}}
									</div>
									<div class='logistics-msg'>
										{{item.context}}
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>


				<div class='iconImage' @click="handleClosePopupIcon">
					<image class='closeAddressIcon' src="@/static/mine/closeAddressIcon.png" alt="" />
				</div>
			</div>
		</uni-popup>



	</view>
</template>

<script>
	import liuzhuanPopupVue from "@/components/basicComponents/liuzhuanpopup.vue"
	import tihuoPopupVue from "@/components/basicComponents/tihuoPopup.vue"
	import {
		myGoods,
		sellGoods,
		takeGoods,
		offShelf,
		myGoodsOrder,
		cancelOrder,
		myOrder,
		confirmReceive,
		sendMsg,
		transferOrder,
		offShelf2014,
		sellGoodsByUserGoodsId0214,
		takeGoodsByUserGoodsId0214,
		confirmReceiptByUserGoodsId0214,
		getOrderLogisticsInfo2,
		getOrderLogisticsInfo
	} from "../../api/api.js"
	export default {
		data() {
			return {
				colorList: [
					"#B4D62D",
					"#FFC532",
					"#28CBB2",
					'#58D506'
				],
				selectItem: {},
				selectItemTiHuo: false,
				selectItemLiuzhuan: false,
				typeId: 2,
				typeList: [
					{
						id: 1,
						title: '流转订单'
					},
					{
						id: 2,
						title: '商城订单'
					},
				],
				navId: 1,
				navList: [],
				navList1: [{
						id: 0,
						title: '全部'
					},
					{
						id: 1,
						title: '待流转'
					},
					// {
					// 	id: 2,
					// 	title: '流转中'
					// },
					{
						id: 3,
						title: '流转出'
					},
					{
						id: 4,
						title: '待发货'
					},
					{
						id: 5,
						title: '已发货'
					},
					{
						id: 8,
						title: '未流转'
					},
					{
						id: 6,
						title: '已完成'
					},
				],
				navList2: [{
						id: 0,
						title: '全部'
					},
					{
						id: 1,
						title: '待支付'
					},
					{
						id: 2,
						title: '待发货'
					},
					{
						id: 3,
						title: '待收货'
					},
					{
						id: 4,
						title: '已完成'
					},
					{
						id: 5,
						title: '已取消'
					},
				],
				list: [],
				pageNum: 1,
				pageSize: 20,
				pages: '',
				logisticsInformation: '',
				goodsInfo: {},
				count: 60,
				counting: false,
				timer:null
			}
		},
		onLoad(e) {
			this.typeId = e.type ? e.type : 2
		},
		onShow() {
			this.pageNum = 1
			this.list = []
			// 获取商品列表
			// this.getList
			this.navList = this.navList1
			this.changeNav(this.navList[0])

			if (this.selectItemTiHuo) {
				this.$refs.tihuoCom.handleGetAddressList()
			}


		},
		components: {
			liuzhuanPopupVue,
			tihuoPopupVue
		},
		onReachBottom() {
			if (this.pages <= this.pageNum) {
				uni.showToast({
					icon: 'none',
					title: '暂无更多~'
				})
				return
			} else {
				this.pageNum++
				// 获取商品列表
				this.getList()
			}
		},
		methods: {
			handleSureTihuoFun() {
				if (this.counting == true) return
				this.selectItemTiHuo = true
				this.$refs.sendCode.close()
			},
			handleCloseTihuo() {
				this.counting = false
				this.count=60
				if(this.timer)
				clearInterval(this.timer)
				this.$refs.sendCode.close()

			},
			handleConfirmGoods(item) {
				// 确认收获
				confirmReceiptByUserGoodsId0214(item.id).then(res => {
					console.log('confirmReceiptByUserGoodsId0214', res)
					uni.showToast({
						title: '操作成功',
						icon: 'none'
					})
					this.pageNum = 1
					this.list = []
					this.navList = this.navList1
					this.getList()
				})
			},
			handleClosePopupIcon() {
				this.$refs.address.close()
			},
			handleTiHuoFn(addressId) {
				console.log('addressId', addressId)

				takeGoodsByUserGoodsId0214(addressId).then(res => {
					uni.showToast({
						title: '操作成功',
						icon: 'none'
					})
					this.$refs.tihuoCom.isProp = false

					this.selectItemTiHuo = false
					this.pageNum = 1
					this.list = []
					this.navList = this.navList1
					this.getList()
				})
			},
			handleSubmitGoods(item) {
				this.counting = true;
				 this.timer = setInterval(() => {
					this.count--
					if (this.count == 0) {
						clearInterval(timer)
						this.count = 60
						this.counting = false;
					}
				}, 1000)
				this.$refs.sendCode.open('center')
				this.selectItem = item


			},
			handleLiuzhuanFn(id) {

				sellGoodsByUserGoodsId0214(id).then(res => {
					uni.showToast({
						title: '操作成功',
						icon: 'none'
					})
					this.pageNum = 1
					this.list = []
					this.selectItemLiuzhuan = false
					this.navList = this.navList1
					this.getList()
				})


			},
			closePropDate() {
				this.selectItem = {}
				this.selectItemLiuzhuan = false
				this.selectItemTiHuo = false
			},
			handleLiuzhuan(item) {
				this.selectItem = item
				this.selectItemLiuzhuan = true
			},
			changeType(item) {
				this.typeId = item.id
				if (this.typeId == 1) {
					this.navList = this.navList1
				} else {
					this.navList = this.navList2
				}
				this.changeNav(this.navList[0])
			},
			changeNav(item) {
				this.navId = item.id
				this.pageNum = 1
				this.list = []
				// 获取商品列表
				this.getList()
			},
			// 获取商品列表
			getList() {
				// 抢拍商品
				if (this.typeId == 1) {
					let data = {
						pageNum: this.pageNum,
						pageSize: this.pageSize,
						state: this.navId == 0 ? null : this.navId
					}
					myGoods(data).then(res => {
						this.list = this.list.concat(res.data.records)
						this.pages = res.data.pages
					})
				} else {
					let data = {
						pageNum: this.pageNum,
						pageSize: this.pageSize,
						state: this.navId == 0 ? null : this.navId - 1,
						orderType: null
					}
					myGoodsOrder(data).then(res => {
						this.list = this.list.concat(res.data.records)
						this.pages = res.data.pages
					})

				}
			},
			viewWuliu(item) {
				console.log('goDetail', item)
				this.goodsInfo = item
				if (item.state == 5 && this.typeId == 1) {
					// 
					console.log('需要弹出弹窗')
					// 根据订单id查询流转订单快递信息
					getOrderLogisticsInfo2({
						orderId: item.id
					}).then(res => {
						console.log(res)
						this.logisticsInformation = res.data
					})

				}

				if (item.state == 2 && this.typeId == 2) {
					// 根据订单id查询商城订单快递信息 
					getOrderLogisticsInfo({
						orderId: item.id
					}).then(res => {
						this.logisticsInformation = res.data
						console.log(res)
					})
				}
				this.$refs.address.open('center')
			},
			// 前往订单详情
			goDetail(item) {

				// uni.navigateTo({
				// 	url: '/pages/mine/orderDetail2?data=' + JSON.stringify(item)
				// })
				if (this.typeId == 1) {
					uni.navigateTo({
						url: '/pages/mine/orderDetail?id=' + item.id
					})
				} else if (this.typeId == 2) {
					uni.navigateTo({
						url:"/pages/mine/orderDetails/orderDetails?id=" + item.id
					})
					// if (item.orderType == 4) { // 会员商品
					// 	uni.navigateTo({
					// 		url: '/pages/index/goodsDetail?goodsId=' + item.goodsId + '&timestamp=0' + '&isVip=1'
					// 	})
					// } else { // 商城商品

					// }
				}

			},
			// 上架拍卖
			listing(item) {
				var that = this
				let data = {
					id: item.id
				}
				sellGoods(data).then(res => {
					if (res.code == 200) {
						uni.showToast({
							title: '操作成功',
							icon: 'none'
						})
						setTimeout(function() {
							that.pageNum = 1
							that.list = []
							// 获取商品列表
							that.getList()
						}, 500)
					}
				})
			},
			// 提货
			pickGoods(item) {
				var that = this
				let data = {
					id: item.id
				}
				takeGoods(data).then(res => {
					if (res.code == 200) {
						uni.showToast({
							title: '操作成功',
							icon: 'none'
						})
						setTimeout(function() {
							that.pageNum = 1
							that.list = []
							// 获取商品列表
							that.getList()
						}, 500)
					}
				})
			},
			// 取消拍卖
			cancel(item) {
				var that = this
				let data = {
					id: item.id
				}
				offShelf2014(item.id).then(res => {
					if (res.code == 200) {
						uni.showToast({
							title: '操作成功',
							icon: 'none'
						})
						setTimeout(function() {
							that.pageNum = 1
							that.list = []
							// 获取商品列表
							that.getList()
						}, 500)
					}
				})
			},


			confirmTransfer(item) {
				this.isProp = true
				this.transferOrderId = item.id
			},
			closeProp() {
				this.isProp = false
				this.transferOrderId = ''
				this.userPhone = ''
				this.payPassword = ''
				this.msgCode = ''
				this.text = '获取验证码'
			},
			// 取消订单
			confirmCancel(item) {
				var that = this
				let data = {
					orderId: item.id
				}
				cancelOrder(data).then(res => {
					if (res.code == 200) {
						uni.showToast({
							title: '操作成功',
							icon: 'none'
						})
						setTimeout(function() {
							that.pageNum = 1
							that.list = []
							// 获取商品列表
							that.getList()
						}, 500)
					}
				})
			},
			// 确认收货
			confirmReceive(item) {
				var that = this
				let data = {
					orderId: item.id
				}
				confirmReceive(data).then(res => {
					if (res.code == 200) {
						uni.showToast({
							title: '操作成功',
							icon: 'none'
						})
						setTimeout(function() {
							that.pageNum = 1
							that.list = []
							// 获取商品列表
							that.getList()
						}, 500)
					}
				})
			}
		}
	}
</script>

<style>
	page {
		background: rgba(237, 241, 242, 1);
	}
</style>
<style lang="less" scoped>
	.content {

		// 导航栏
		.navList {
			padding: 33rpx 0;
			display: flex;
			align-items: center;
			width: 100%;
			background-color: #FE3B33;

			.nav {
				position: relative;
				text-align: center;
				width: 25%;
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: rgba(255, 255, 255, 0.9);
				line-height: 40rpx;

				.topImg {
					width: 50rpx;
					height: 27rpx;
					position: absolute;
					left: 50% - 12rpx;
					bottom: -35rpx;
				}
			}

			.active {
				font-size: 30rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #FFFFFF;
			}
		}

		.top-content {
			// background: #fff;
			// width: 750rpx;
			// display: flex;
			// flex-direction: column;
			// align-items: center;
			// padding-top: 31rpx;
		}

		.tapeList {
			margin-top: 20rpx;
			width: 750rpx;
			height: 96rpx;
			background: #FFFFFF;
			box-shadow: inset 0px -2rpx 2rpx 0px rgba(199, 199, 199, 0.25);
			text-align: center;
			border-radius: 20rpx 20rpx 0 0;
			display: flex;
			align-items: center;

			// border-radius: 20rpx;
			// overflow: hidden;
			.type {
				position: relative;
				font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
				font-weight: 400;
				font-size: 32rpx;
				color: #BCBDBD;
				line-height: 28rpx;
				margin-left: 40rpx;

				.procss {
					position: absolute;
					bottom: -8rpx;
					right: 0rpx;
					width: 126rpx;
					height: 8rpx;
					background: #2DD800;
				}

			}

			.active {
				font-weight: bold;
				color: #3C3C3C;
			}
		}

		.tabbar-content {
			width: 690rpx;
			padding: 0 30rpx;
			background: #ffffff;
			height: 96rpx;
			display: flex;
			align-items: center;

			justify-content: space-between;

			.tab {
				min-width: max-content;
				padding: 0 20rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 32rpx;
				color: #BCBDBD;
				line-height: 96rpx;
			}

			.active {
				font-weight: bold;
				color: #3C3C3C;
			}
		}

		// 商品列表
		.list {
			margin-top: 20rpx;
			// margin-left: 20rpx;
			background: #fff;
			position: relative;
			padding: 20rpx;
			width: 690rpx;
			display: flex;


			.shopping {
				display: flex;
				width: 86%;


				.status {
					position: absolute;
					top: 20rpx;
					right: 20rpx;
					font-family: Abhaya Libre, Abhaya Libre;
					font-weight: 400;
					font-size: 28rpx;
					color: #007FFC;
					line-height: 40rpx;
					text-align: center;
					width: 104rpx;
					height: 40rpx;
					border-radius: 40rpx;
					background-color: rgba(240, 248, 255, 1);
				}

				.status1 {
					background-color: RGBA(255, 251, 224, 1);
					color: RGBA(252, 218, 0, 1);
				}

				.status2 {
					background-color: RGBA(244, 255, 249, 1);
					color: RGBA(0, 163, 73, 1);
				}

				.status3 {
					background-color: RGBA(247, 247, 247, 1);
					color: RGBA(141, 141, 141, 1);
				}

				.status4 {
					background-color: RGBA(255, 242, 242, 1);
					color: RGBA(255, 35, 35, 1);
				}

				.statusShopping {
					position: absolute;
					top: 20rpx;
					right: 20rpx;
					font-family: Abhaya Libre, Abhaya Libre;
					font-weight: 400;
					font-size: 28rpx;
					color: #fff;
					line-height: 40rpx;
					text-align: center;
					width: 104rpx;
					height: 40rpx;
					border-radius: 40rpx;
					background-color: rgba(255, 35, 35, 1);
				}

				.statusShopping1 {
					background-color: rgba(0, 163, 73, 1);
				}

				.statusShopping2 {
					background-color: rgba(141, 141, 141, 1);
				}

				.statusShopping3 {
					background-color: rgba(252, 218, 0, 1);
				}

				.statusShopping4 {
					background-color: rgba(0, 127, 252, 1);
				}

				.shoppingImg {
					margin-left: 20rpx;
					width: 220rpx;
					height: 220rpx;
					border-radius: 20rpx;
				}

				.shoppingInfo {
					margin-left: 20rpx;
					flex: 1;


					.title {
						height: 72rpx;

						font-family: PingFang SC, PingFang SC;
						font-weight: 500;
						font-size: 28rpx;
						color: #3C3C3C;
						line-height: 36rpx;
					}

					.price {
						margin-top: 20rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: 500;
						font-size: 20rpx;
						color: #2E2E2E;
						line-height: 24rpx;
					}

					.time {
						margin-top: 10rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: 500;
						font-size: 20rpx;
						color: #BCBDBD;
						line-height: 24rpx;
						margin-bottom: 10rpx;
					}
				}
			}

			.iconStateSize {
				width: 120rpx;
				height: 120rpx;
				position: absolute;
				bottom: 0;
				right: 0;
			}

			.submit {
				width: 124rpx;
				height: 48rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 24rpx;
				color: #fff;
				display: inline-flex;
				box-sizing: border-box;
				align-items: center;
				justify-content: center;
				background: #00C538;
				border-radius: 40rpx;
			}

			.submit_2 {
				width: 124rpx;
				height: 48rpx;
				background: #F0F7FF;
				border-radius: 40rpx 40rpx 40rpx 40rpx;
				border: 2rpx solid #00C538;
				font-weight: 500;
				font-size: 24rpx;
				color: #00C538;
				display: inline-flex;
				align-items: center;
				justify-content: center;
			}

			.submit_1 {
				width: 124rpx;
				height: 48rpx;
				background: #F7F7F7;
				border-radius: 40rpx;
				font-weight: 500;
				font-size: 24rpx;
				color: #8D8D8D;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			.viewWuliuBtn {
				position: absolute;
				bottom: 20rpx;
				right: 150rpx;
			}

			._subotherBtn {
				position: absolute;
				bottom: 20rpx;
				right: 20rpx;
				min-width: 124rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 24rpx;
				color: #fff;
				text-align: center;
				font-style: normal;
				line-height: 60rpx;
				padding: 0rpx 20rpx;
				display: inline-flex;
				box-sizing: border-box;
				background: #2DD800;
				border-radius: 40rpx;
				white-space: nowrap;
			}

			.cancel {
				border: 1px solid #CCCCCC;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 26rpx;
				color: #666666;
				background: #fff;
				text-align: center;
				font-style: normal;
			}
		}


		.sessionsName {
			position: absolute;
			top: 0;
			right: 0;
			width: 102rpx;
			height: 42rpx;
			border-bottom-left-radius: 100rpx;
			font-weight: 500;
			font-size: 24rpx;
			color: #FFFFFF;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.noneContent {
			display: flex;
			align-items: center;
			flex-direction: column;

			.noneImg {
				margin-top: 132rpx;
				width: 320rpx;
				height: 291rpx;
			}

			.tips {
				margin-top: 36rpx;
				font-size: 24rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #B8B8B8;
				line-height: 33rpx;
			}
		}
	}

	.optionsBtn {
		display: flex;
		justify-content: flex-end;
		align-items: center;
		position: absolute;

		bottom: 20rpx;
		right: 20rpx;

	}

	.mr-20 {
		margin-right: 20rpx;
	}

	.codeContent {
		width: 630rpx;
		background: #FFFFFF;
		border-radius: 24rpx;
		position: relative;
		padding: 40rpx;
		box-sizing: border-box;

		.closeIcon {
			width: 40rpx;
			height: 40rpx;
			position: absolute;
			top: 28rpx;
			right: 28rpx;
		}

		.headerTitle {
			font-weight: 500;
			font-size: 36rpx;
			color: #3C3C3C;
			display: flex;
			justify-content: center;
			align-items: center;
			margin-bottom: 28rpx;
		}

		.content {
			font-weight: 400;
			font-size: 28rpx;
			line-height: 40rpx;
			color: #66686F;
			margin-bottom: 40rpx;
			text-align: center;

			span {
				color: #FF545D;
				display: contents;
			}
		}

		.btn_option {
			display: flex;
			align-items: center;

			.cancel-btn {
				width: 266rpx;
				height: 84rpx;
				background: #EEEEEE;
				border-radius: 8rpx;
				font-weight: 500;
				font-size: 32rpx;
				color: #3C3C3C;
				display: flex;
				justify-content: center;
				align-items: center;
				margin-right: 18rpx;
			}


			.sure-btn {
				width: 266rpx;
				height: 84rpx;
				background: #EB3B27;
				border-radius: 8rpx;
				font-weight: 500;
				font-size: 32rpx;
				color: #FFFFFF;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}
	}

	.addressPopupBox {
		width: 694rpx;
		height: 1000rpx;
		background: #FFFFFF;
		border-radius: 24rpx;
		position: relative;
		padding: 34rpx 28rpx;
		box-sizing: border-box;

		.goodsInfoBox {
			padding-bottom: 28rpx;
			box-sizing: border-box;
			border-bottom: 2rpx solid #F2F2F2;
			display: flex;

			.goodsMainImage {
				width: 120rpx;
				height: 120rpx;
				background: #F9F9F9;
				border-radius: 8rpx;
				overflow: hidden;
				margin-right: 20rpx;
			}

			.logistics-info {
				display: flex;
				flex: 1;
				height: 120rpx;
				justify-content: space-between;
				flex-direction: column;

				.logistics-state {
					font-weight: 600;
					font-size: 40rpx;
					color: #151822;
				}

				.logistics-kuaidi {
					font-weight: 400;
					font-size: 24rpx;
					color: #484A51;
				}
			}
		}

		.logistics-list-contaner {
			position: relative;
			overflow: hidden;
		}

		// .logistics-list-contaner :before {
		// 	content: '';
		// 	width: 4rpx;
		// 	height: 73%;
		// 	border-left: 2rpx dashed #00CBCE;
		// 	display: block;
		// 	position: absolute;
		// 	top: 60rpx;
		// 	left: 76rpx;
		// }

		.logistics-list {
			display: flex;
			flex-direction: column;
			padding: 38rpx 36rpx;
			box-sizing: border-box;
			height: 750rpx;
			overflow-y: auto;

			.address {

				display: flex;
				margin-bottom: 40rpx;
				position: relative;

				.takeState1 {
					margin-right: 20rpx;
					width: 16rpx;
					height: 16rpx;
					margin-left: 35rpx;
					margin-top: 20rpx;
					background: #898A8F;
					border-radius: 16rpx;
					overflow: hidden;
					font-weight: 500;
					font-size: 24rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					color: #FFFFFF;
					margin-right: 50rpx;
				}

				.takeState {
					min-width: 84rpx;
					height: 40rpx;
					background: #00CBCE;
					border-radius: 24rpx;
					font-weight: 500;
					font-size: 24rpx;
					color: #FFFFFF;
					display: flex;
					flex: 1;
					justify-content: center;
					align-items: center;
					margin-right: 20rpx;
				}


				.takeState2 {
					min-width: 84rpx;
					height: 40rpx;
					background: #00CBCE;
					border-radius: 24rpx;
					font-weight: 500;
					font-size: 24rpx;
					color: #FFFFFF;
					display: flex;
					flex: 1;
					justify-content: center;
					align-items: center;
					margin-right: 20rpx;
				}

				.paisong {
					background: #898A8F;
				}

				.qianshou {
					padding-top: 10rpx;
					box-sizing: border-box;

					.text-A {
						font-weight: 400;
						font-size: 24rpx;
						color: #484A51;
						margin-bottom: 8rpx;

						span {
							font-weight: 500;
							font-size: 24rpx;
							color: #898A8F !important;
							margin-right: 12rpx;
						}
					}
				}

				.text {
					width: 498rpx;
					font-weight: 400;
					font-size: 24rpx;
					color: #484A51;
					line-height: 30rpx;


					.text-A {
						font-weight: 400;
						font-size: 24rpx;
						color: #484A51;
						margin-bottom: 8rpx;

						span {
							font-weight: 500;
							font-size: 24rpx;
							color: #00CBCE;
							margin-right: 12rpx;
						}
					}

					.logistics-msg {
						font-weight: 400;
						font-size: 24rpx;
						color: #484A51;
					}
				}
			}

			.takeState:before {
				content: "";
				position: absolute;
				width: 2rpx;
				height: 130%;
				top: 17rpx;
				border-left: 2rpx dashed #00CBCE;
			}
		}

		.address:not(:last-child) {
			.takeState1:before {
				content: "";
				position: absolute;
				width: 2rpx;
				height: 130%;
				top: 40rpx;
				border-left: 2rpx dashed #898A8F;
			}
		}

		.iconImage {
			bottom: -100rpx;
			left: 50%;
			transform: translateX(-50%);

			position: absolute;
		}

		.closeAddressIcon {
			width: 64rpx;
			height: 64rpx;
		}
	}
</style>